/* eslint-disable no-nested-ternary */
import React from 'react';

const status_over = [10102, 10104, 10122, 10126, 10128, 10131, 10108];

interface PrintElemProps {
  dataList: any;
}

class PrintElemInfo extends React.Component<PrintElemProps> {
  render() {
    const { dataList = [] } = this.props;
    let paidAmount: any = '';

    dataList.forEach((item: any) => {
      if (item.status === 10135) {
        paidAmount = <span>*</span>;
        return;
      }
      if (item.amount && !status_over.includes(item.status)) {
        paidAmount = <span>{item.amount / 100}</span>;
        return;
      }
      if (item.paidAmount !== 0 && status_over.includes(item.status)) {
        paidAmount = <span>{`${item.paidAmount / 100}/${item.expectAmount / 100}`}</span>;
        return;
      }
      paidAmount = <span key={item.id}>{item.paidAmount / 100}</span>;
    });

    return (
      <div style={{ display: 'none' }}>
        <div className="printView" id="billDetails">
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
            }}
          >
            <thead>
              <tr>
                <td
                  colSpan={14}
                  style={{
                    textAlign: 'center',
                    fontSize: '20px',
                    fontWeight: 'bold',
                    border: '1px solid #ADADAD',
                    borderCollapse: 'collapse',
                    lineHeight: '200%',
                  }}
                >
                  快递查询
                </td>
              </tr>
            </thead>
            <tbody>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td style={{ border: '1px solid #ADADAD' }}>序号</td>
                <td style={{ border: '1px solid #ADADAD' }}>运单号</td>
                <td style={{ border: '1px solid #ADADAD' }}>订单ID</td>
                <td style={{ border: '1px solid #ADADAD' }}>开箱密码</td>
                <td style={{ border: '1px solid #ADADAD' }}>收件人</td>
                <td style={{ border: '1px solid #ADADAD' }}>投递人</td>
                <td style={{ border: '1px solid #ADADAD' }}>接驳人</td>
                <td style={{ border: '1px solid #ADADAD' }}>入库时间</td>
                <td style={{ border: '1px solid #ADADAD' }}>取件费用(元)</td>
                <td style={{ border: '1px solid #ADADAD' }}>到付金额(元)</td>
                <td style={{ border: '1px solid #ADADAD' }}>存放位置</td>
                <td style={{ border: '1px solid #ADADAD' }}>快递公司</td>
                <td style={{ border: '1px solid #ADADAD' }}>订单状态</td>
                <td style={{ border: '1px solid #ADADAD' }}>短信状态</td>
              </tr>
              {
                dataList.map((item: any, index: number) => (
                  <tr
                    key={item.id}
                    style={{
                      lineHeight: '32px',
                      height: '32px',
                      fontSize: 12,
                      textAlign: 'center',
                    }}
                  >
                    <td style={{ border: '1px solid #ADADAD' }}>{index + 1}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.expCode}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.id}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.openCode}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.consigneePhone}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>
                      {
                        [1, 4, 5, 6].includes(item.deliveryWay)
                          ? (item.courierPhone || '--')
                          : (item.courierName || '--')
                      }
                    </td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.transhipUser}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.inTime}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>
                      {
                        item.status === 10135
                          ? <span>*</span>
                          : (
                            item.amount && !status_over.includes(item.status)
                              ? <span>{item.amount / 100}</span>
                              : (
                                item.paidAmount !== 0 && status_over.includes(item.status)
                                  ? <span>{`${item.paidAmount / 100}/${item.expectAmount / 100}`}</span>
                                  : <span>{item.paidAmount / 100}</span>
                              )
                          )
                      }
                    </td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.payment / 100}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.address}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.expressName}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.statusName}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.smsStatusName || '--'}</td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default PrintElemInfo;
